<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <ul>
    <%products.forEach(item=>{%>
        <li>
            <%=item.id%>&nbsp;<%=item.name%>&nbsp;<%=item.price%>
        </li>
        <%})%>
    </ul>  
    
    <script>
        // js里面不能用ejs语句
        // var head = <%=products[0].name%>
        // document.querySelector('h1').innerHTML = '?'
        
        // const products = [
        //     { id: 1, name: 'aaa', price: 111 },
        //     { id: 2, name: 'bbb', price: 222 },
        //     { id: 2, name: 'ccc', price: 333 }
        // ]
        // document.querySelector('h1').innerHTML = '用原生'
        // let ul = document.querySelector('ul')
        // <%=products%>.forEach(item => {
        //     var str = item.id + ' ' + item.name + ' ' + item.price
    
        //     let li = document.createElement('li')
        //     li.innerHTML = str
        //     ul.append(li)
        // })
    </script>
</body>
</html>